<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页</title>
</head>
<style>
	
		#userDiv{
			width: 400px;
			margin: 0px auto;
		}
		
		input[type=text]{
			width: 70px;
			height: 18px;
		}
	</style>
	<body>
	<div id="userDiv">
		<table id="userTable" border=1px>
			<tr>
				<td colspan="4">
					<input type="button" id="updata" value="添加" />
					<input type="button" id="updata" value="删除" />
					<input type="button" id="updata" value="修改" />
				    <input type="text" id="queryText"  />
					<input type="button" id="updata" value="查询" />
				     
				
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>id</td>
				<td>名字</td>
				<td>密码</td>
			</tr>
		</table>
	</div>


</body>
<script type="text/javascript" src="../js/jquery-1.4.4.js"></script>
<script>
	$(function(){
		var url='http://localhost:8090/java-ajax-interaction-json/user?method=findPage';
		$.ajax({
			'type':'post',
			'url':url,
			'data':{
				'currentPage':1,
				'pageSide':2,
			},
			'success':function(jsonData){
				
				//fingWithPage":[{"id":1001,"name":"吴荣来","password":"15213486dwdw32165165"}
				console.log(jsonData);
				
				$(jsonData.fingWithPage).each(function(i,data){
					
					//console.log(data);
					
					var id=data.id;
					var name=data.name;
					var password=data.password;
					
					//逻辑思路 在table插入1个tr
					
					//1
					var td01= $("<td>"+id+"</td>");
					var td02= $("<td>"+name+"</td>");
					var td03= $("<td>"+password+"</td>");
					//添加一个复选框
					var td04= $('<td><input type="checkbox"/></td>');
					//生成一个tr,把td插到tr中
					var tr01= $("<tr></tr>");
					//先添加的在前面
					tr01.append(td04);
					
					tr01.append(td01);
					tr01.append(td02);
					tr01.append(td03);
					
					//把tr插到table中
					$('#userTable').append(tr01);
					
					//分页
					
				});
				
				
			},
			'dataType':'json'
		});
		
	});
		
	

</script>
</html>